<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
  	<style type="text/css">
  		#mydiv{
  			width:500px;
  			margin-left:auto;
  			margin-right: auto;
  		}
  	</style>
  	<script type="text/javascript">
  		var xmlHttp;
  		//获得用户输入的信息的更多关联信息
  		function getMoreContents(){
  			//首先要获得用户的输入
  			var content=document.getElementById("keyword");
  			if(content.value==""){
  				return;
  			}
  			//给服务器发送用户输入的内容
  			createXMLHttp();
  			//给服务器发送数据
  			var url="search？keyword="+escape(content.value);
  			xmlHttp.open("GET",url,true);
  			//绑定回调函数 状态0-4 4=complete
  			xmlHttp.onreadystatechange=callback;
  			xmlHttp.send(null);
  			
  		}
  		//获得XMLHttpduixiang
  		function createXMLHttp(){
  			//对于大多数的浏览器都适用的
  			if(window.XMLHttpRequest){
  				xmlHttp=new XMLHttpRequest();
  			}
  			else if(window.ActiveXObject){
  				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  				if(!xmlHttp){
  					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  				}
  			}
  		}
  		function callback(){
  			if(xmlHttp.readyState=4){
  				if(xmlHttp.status==200){
  					var result=xmlHttp.responseText;
  					var json=eval("("+result+")");
  				}
  			}
  		}
  		function setContent(contents){
  			var size=contents.length;
  			for(var i=0;i<size;i++){
  				var nextNode=contents[i]
  				var tr=document.createElement("tr");
  				var td=document.createElement("td");
  				td.setAttribute("border", "0");
  				td.setAttribute("bgcolor", "#fffafa");
  				td.onmouseover=function(){
  					this.className="mouseOver"
  				}
  				td.onmouseout=function(){
  					this.className="mouseOut"
  				}
  				td.onclick=function(){
  					
  				}
  				var text=document.createTextNode(nextNode);
  				td.appendChild(text);
  				tr.appendChild(td);
  				document.getElementById("content_table")
  			}
  		}
  	</script>
  </head>
  
  <body>
    <div id="mydiv">
    	<!--输入框-->
    	<input type="text" size="50" id="keyword" onkeyup="getMoreContents()">
    	<input type="button" value="百度一下" width="50px">
    </div>
    <!-- 下面是内容展示区域 -->
    <div id=popDiv>
    	<table id="content_table">
    		
    	</table>
    </div>
    
  </body>
</html>
